<template>
	<view>
		<view class="checkout">
			<view class="select_box">
				<picker @change="handleChange" :range="exitData">
					<label class="aa">{{ currExit }} ></label>
				</picker>
			</view>
			<view class="select_box1">
				<picker @change="handleChange1" :range="exitData1">
					<label class="">{{ currExit1 }} ></label>
				</picker>
			</view>
		</view>
		<view>
			<uni-section title="" type="" v-for="item in productList">i
				<text style="color: #0081FF;margin-left: 30rpx;">{{item.createTime | formatDate}}</text><br>
				<uni-card title="" extra="">
					<text class="uni-body">类型:{{item.type}}</text><text class="t1">-{{item.money}}</text><br>
					<text class="uni-body">时间:{{item.createTime | formatDate}}</text><br>
					<text class="uni-body">单号:{{item.billNumber}}</text>
				</uni-card>
			</uni-section>
		</view>
		<!-- <view class="foot-box" @click="zhifu"> -->
		<!-- <button @click="submit" class="button-login" hover-class="button-hover">立即充值</button> -->
		<!-- </view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				exitData: ['缴费类别', '电费', '物业费', '宽带费', '暖气费', '燃气费', '物业费', '车位费', '水费'],
				exitData1: ['选择月份', '-01-', '-02-', '-03-', '-04-', '-05-', '-06-', '-07-', '-08-', '-09-', '-10-', '-11-',
					'-12-'
				],
				currIndex: 0,
				currIndex1: 0,
				currExit: '缴费类别',
				currExit1: '选择月份',
				productList: []
			}
		},
		onLoad() {
			this.getcfMypayment();
		},
		//时间戳的处理    
		filters: {
			formatDate: function(value) {
				var date = new Date(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			}

		},
		methods: {
			getcfMypayment() {
				this.$axios({
					url: '/systemuser/payment-type/cfGetAllcost',
					data: {
						id: 1,
						type: this.currExit,
						month: this.currExit1
					},
					method: 'GET',
					success: (res) => {
						if (res.data.success == true) {
							console.log("数据", res)
							this.productList = res.data.data.list
							this.balance = res.data.data.balance
						}
					}
				})
			},
			handleChange(e) {
				this.currIndex = e.target.value;
				this.currExit = this.exitData[this.currIndex]
				console.log(this.currExit)
				this.$axios({
					url: '/systemuser/payment-type/cfGetAllcost',
					data: {
						id: 1,
						type: this.currExit,
						month: this.currExit1
					},
					method: 'GET',
					success: (res) => {
						if (res.data.success == true) {
							console.log("数据", res)
							// debugger
							this.productList = res.data.data.list
							this.balance = res.data.data.balance
						}
					}
				})
			},
			handleChange1(e) {
				this.currIndex1 = e.target.value;
				this.currExit1 = this.exitData1[this.currIndex1]
				console.log(this.currExit1, "11111111111")
				this.$axios({
					url: '/systemuser/payment-type/cfGetAllcost',
					data: {
						id: 1,
						type: this.currExit,
						month: this.currExit1
					},
					method: 'GET',
					success: (res) => {
						if (res.data.success == true) {
							console.log("数据", res)
							// debugger
							this.productList = res.data.data.list
							this.balance = res.data.data.balance
						}
					}
				})
			},
			seezhangdan() {
				uni.showModal({
					content: '!!!',
					showCancel: false
				});
			},
			submit() {
				uni.showModal({
					content: '!!!',
					showCancel: false
				});
			}
		}
	}
</script>

<style lang="scss">
	.checkout {
		margin-top: 40rpx;
		/* padding: 30rpx; */

		.select_box {
			height: 30px;
			line-height: 30px;
			border: 1px solid #E5AC3C;
			background: #E9F0FE;
			color: blue($color: #004adf);
			border-radius: 20rpx;
			font-size: 30rpx;
			text-align: center;
			width: 150rpx;
			margin-left: 20rpx;
			margin-top: 90rpx;
		}

		.select_box1 {
			position: absolute;
			left: 80px;
			top: 25px;
			height: 30px;
			line-height: 30px;
			border: 1px solid #E5AC3C;
			background: #E9F0FE;
			color: blue($color: #004adf);
			border-radius: 20rpx;
			font-size: 30rpx;
			text-align: center;
			width: 150rpx;
			margin-left: 20rpx;
			margin-top: -50rpx;
		}
	}

	.t1 {
		color: red;
		margin-left: 360rpx;
	}

	.foot-box {
		width: 750rpx;
		height: 100rpx;
		background-color: #0055ff;
		margin-top: 10.3vh;
		color: #FFFFFF;
		font-size: 40rpx;
		line-height: 100rpx;
		text-align: center;
	}

	.button-login {
		color: #FFFFFF;
		font-size: 34rpx;
		width: 470rpx;
		height: 100rpx;
		background: linear-gradient(-90deg, rgba(58, 163, 255, 1.0), rgba(255, 197, 131, 1.0));
		box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
		border-radius: 50rpx;
		line-height: 100rpx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 100rpx;
	}
</style>
